<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Folder Element Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Folder Element</h1>
        </gs-jumbo>
            
        <gs-container padded min-width="sml;med;lrg;">
            <h3 class="doc-header">Tag:</h3>
            <pre>&lt;gs-folder&gt;&lt;/gs-folder&gt;</pre>
            
            <h3 class="doc-header">Description:</h3>
            <p>The <code>gs-folder</code> tag enables you to navigate folders, upload files, delete files, rename files and open the file editor for files.</p>
            
            <h1 class="doc-header">Examples:</h1>
            <div class="doc-section">
                <div class="doc-example-description">
                    <span class="h3">Skeleton Example:</span>
                    <p>A basic <code>gs-folder</code> element:</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-folder></gs-folder>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[path=""]</code>:</span>
                    <p>The <code>[path]</code> attribute is for defining what directory the element should start in. Users cannot navigate to folders above the <code>[path=""]</code> setting (this is merely a front-end limitation, do not depend on this as a security measure).</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-folder path="/role/trusted_g/"></gs-folder>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[horizontal=""]</code>:</span>
                    <p>The <code>[horizontal]</code> attribute is for putting the file list and the folder list side by side.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-folder horizontal></gs-folder>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[no-folders=""]</code>:</span>
                    <p>The <code>[no-folders]</code> attribute is for hiding the folder list. This can be used to prevent the user from navigating anywhere other than the folder they start in (this is merely a front-end limitation, do not depend on this as a security measure).</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-folder no-folders></gs-folder>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[no-files=""]</code>:</span>
                    <p>The <code>[no-files]</code> attribute is for hiding the file list.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-folder no-files></gs-folder>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[mini=""]</code>:</span>
                    <p>The <code>[mini]</code> attribute removes the border around the element.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-folder mini></gs-folder>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[qs=""=""]</code>:</span><br />
                    <p>The name <code>[qs=""]</code> stands for "querystring". The querystring is the part in the URL after the "?". The <code>[qs]</code> attribute has two formats, each with their own use.</p>
                    
                    <ul>
                        <li>qs="<i>key1</i>=<i>attribute1</i>". This format allows you to fill any attribute with any key from the querystring. To use multiple keys from the querystring you can put a comma-separated list of these expressions (for example: qs="<i>key1</i>=<i>attribute1</i>,<i>key2</i>=<i>attribute2</i>"). If you need an attribute to be added when a querystring key is not present, replace the "=" with "!=" (for example: qs="<i>key1</i>!=<i>attribute1</i>", attribute1 will only be added if key1 is not in the querystring). As a shorthand, if the key in the querystring is the same name as the attribute you want to fill, you can omit the attribute name in the expression (for example: qs="<i>key1</i>="). If an expression doesn't find it's key in the querystring: it reverts the attribute that it fills to it's original value.</li>
                        <li>qs="<i>key</i>". This format will cause the gs-folder to refresh when a change occurs in the query string and the key is present.</li>
                    </ul>
                </div>
                <gs-doc-example query-string="test1=true&test2=false">
                    <template for="html" height="35">
                        <gs-folder qs="test1"></gs-folder>
                        <gs-folder qs="test2=value"></gs-folder>
                        <gs-folder qs="test3=hidden"></gs-folder>
                        <gs-folder qs="test4!=hidden"></gs-folder>
                        <br />
                        <br />
                        <gs-grid widths="1,1">
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test1=test');">Add "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test1');">Remove "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test2=test');">Add "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test2');">Remove "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test3=yes');">Add "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test3');">Remove "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test4=yes');">Add "test4"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test4');">Remove "test4"</gs-button>
                            </gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[no-list-error=""]</code>:</span>
                    <p>The <code>[no-list-error]</code> attribute causes errors that occur when the <code>gs-folder</code> attempts to load a folder to be ignored. This attribute is useful because sometimes, the folder that a gs-folder is looking at may not exist yet. <b>Note:</b> Once the user uploads or creates a file inside the folder: the necessary folders will be created automatically.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-folder no-list-error path="/role/trusted_g/test_{{! Math.random().toString().substring(2) }}/"></gs-folder>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[disabled=""]</code>:</span>
                    <p>The <code>[disabled]</code> attribute causes the <code>gs-folder</code> to disallow changes.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-folder disabled path="/role/trusted_g/"></gs-folder>
                    </template>
                </gs-doc-example>
            </div>
        </gs-container>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>